<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>002投简历和刷题 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="前言日志，各位看官就当乐子看吧。 正经人谁写日记啊？！！                                                                                                                                     —-鹅城县长 今天看了vue的知识，但不算系统复习，直接进入彩蛋环节。 彩蛋实">
<meta property="og:type" content="article">
<meta property="og:title" content="002投简历和刷题">
<meta property="og:url" content="http://example.com/2023/03/22/002%E6%8A%95%E7%AE%80%E5%8E%86%E5%92%8C%E5%88%B7%E9%A2%98/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="前言日志，各位看官就当乐子看吧。 正经人谁写日记啊？！！                                                                                                                                     —-鹅城县长 今天看了vue的知识，但不算系统复习，直接进入彩蛋环节。 彩蛋实">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2023-03-22T13:42:24.756Z">
<meta property="article:modified_time" content="2023-03-22T13:53:49.287Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-002投简历和刷题" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2023/03/22/002%E6%8A%95%E7%AE%80%E5%8E%86%E5%92%8C%E5%88%B7%E9%A2%98/" class="article-date">
  <time class="dt-published" datetime="2023-03-22T13:42:24.756Z" itemprop="datePublished">2023-03-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      002投简历和刷题
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>日志，各位看官就当乐子看吧。</p>
<p><strong>正经人谁写日记啊？！！</strong></p>
<p>                                                                                                                                    —-鹅城县长</p>
<p>今天看了<strong>vue</strong>的知识，但不算系统复习，直接进入彩蛋环节。</p>
<h1 id="彩蛋"><a href="#彩蛋" class="headerlink" title="彩蛋"></a>彩蛋</h1><p>实施的面试可能没机会了，凉了。所以下午在招聘软件上和HR对线。有一个外包公司回复了，发了一个笔试题。于是下午刷了一下题目，想临时抱佛脚。牛客上面的字符串的三道题，一起来看看吧。</p>
<h1 id="字符串编程题"><a href="#字符串编程题" class="headerlink" title="字符串编程题"></a>字符串编程题</h1><h2 id="NC89-字符串变形"><a href="#NC89-字符串变形" class="headerlink" title="NC89 字符串变形"></a>NC89 字符串变形</h2><p>对于一个长度为 n 字符串，我们需要对它做一些变形。</p>
<p>首先这个字符串中包含着一些空格，就像”Hello World”一样，然后我们要做的是把这个字符串中由空格隔开的单词反序，同时反转每个字符的大小写。</p>
<p>比如”Hello World”变形后就变成了”wORLD hELLO”。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">trans</span>(<span class="params">s, n</span>)&#123;</span><br><span class="line">    <span class="comment">//write code here</span></span><br><span class="line">    <span class="comment">// 参考用时最短的代码发现：</span></span><br><span class="line">    <span class="comment">// 1. 提前对字符串再拼接是没有必要的</span></span><br><span class="line">    <span class="comment">// 2. 大小写字母的转化可以简化为：</span></span><br><span class="line">    <span class="comment">// tmpArr[j]==tmpArr[j].toLowerCase()?tmpArr[j].toUpperCase():tmpArr[j].toLowerCase()</span></span><br><span class="line">    <span class="keyword">let</span> revStr=s.<span class="title function_">split</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">reverse</span>().<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>);</span><br><span class="line">    <span class="keyword">let</span> tmpArr=revStr.<span class="title function_">split</span>(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;n;i++)&#123;</span><br><span class="line">        <span class="keyword">let</span> letter=tmpArr[i]</span><br><span class="line">        <span class="keyword">if</span>(letter!==<span class="string">&#x27; &#x27;</span> &amp;&amp; letter&gt;=<span class="string">&#x27;a&#x27;</span> &amp;&amp; letter&lt;=<span class="string">&quot;z&quot;</span>)&#123;</span><br><span class="line">            tmpArr[i]=letter.<span class="title function_">toUpperCase</span>()</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(letter!==<span class="string">&#x27; &#x27;</span> &amp;&amp; letter&gt;=<span class="string">&#x27;A&#x27;</span> &amp;&amp; letter&lt;=<span class="string">&quot;Z&quot;</span>)&#123;</span><br><span class="line">            tmpArr[i]=letter.<span class="title function_">toLowerCase</span>()</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> tmpArr.<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    trans : trans</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="NC55-最长公共前缀"><a href="#NC55-最长公共前缀" class="headerlink" title="NC55 最长公共前缀"></a>NC55 最长公共前缀</h2><p>给你一个大小为 n 的字符串数组 strs ，其中包含n个字符串 , 编写一个函数来查找字符串数组中的最长公共前缀，返回这个公共前缀。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">  * </span></span><br><span class="line"><span class="comment">  * <span class="doctag">@param</span> strs string字符串一维数组 </span></span><br><span class="line"><span class="comment">  * <span class="doctag">@return</span> string字符串</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">longestCommonPrefix</span>(<span class="params"> strs </span>) &#123;</span><br><span class="line">    <span class="comment">// write code here</span></span><br><span class="line">    <span class="comment">// 参考他人代码发现：</span></span><br><span class="line">    <span class="comment">// 1.排序起初是考虑对数值型字符串，按字典顺序排会造成 112排在2前面。但是题目只是为了找最长前缀，不需要将短字符串排在长字符串前面。</span></span><br><span class="line">    <span class="comment">// 2.基于以上，找最长前缀的逻辑也可以简化，直接取第一和最后一个元素，找他们的公共前缀就可以了</span></span><br><span class="line">    strs.<span class="title function_">sort</span>(<span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(a.<span class="property">length</span>&gt;b.<span class="property">length</span>) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span>(a.<span class="property">length</span>===b.<span class="property">length</span>) <span class="keyword">return</span> a&gt;b;</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">let</span> first=strs[<span class="number">0</span>]?strs[<span class="number">0</span>]:<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="keyword">let</span> i=first.<span class="property">length</span>;</span><br><span class="line">    <span class="keyword">while</span>(i&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> subStr=first.<span class="title function_">slice</span>(<span class="number">0</span>,i);</span><br><span class="line">        <span class="keyword">let</span> isMatch=strs.<span class="title function_">every</span>(<span class="function">(<span class="params">value</span>)=&gt;</span>&#123;</span><br><span class="line">            <span class="comment">// 前缀，符合则返回0</span></span><br><span class="line">            <span class="keyword">return</span> value.<span class="title function_">indexOf</span>(subStr)===<span class="number">0</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">if</span>(isMatch) <span class="keyword">break</span>;</span><br><span class="line">        i--;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> first.<span class="title function_">slice</span>(<span class="number">0</span>,i);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    longestCommonPrefix : longestCommonPrefix</span><br><span class="line">&#125;;x : longestCommonPrefix</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="NC113-验证IP地址"><a href="#NC113-验证IP地址" class="headerlink" title="NC113 验证IP地址"></a>NC113 验证IP地址</h2><p>编写一个函数来验证输入的字符串是否是有效的 IPv4 或 IPv6 地址  </p>
<p>IPv4 地址由十进制数和点来表示，每个地址包含4个十进制数，其范围为 0 - 255， 用(“.”)分割。比如，172.16.254.1；<br>同时，IPv4 地址内的数不会以 0 开头。比如，地址 172.16.254.01 是不合法的。  </p>
<p>IPv6 地址由8组16进制的数字来表示，每组表示 16 比特。这些组数字通过 (“:”)分割。比如,  2001:0db8:85a3:0000:0000:8a2e:0370:7334 是一个有效的地址。而且，我们可以加入一些以 0 开头的数字，字母可以使用大写，也可以是小写。所以， 2001:db8:85a3:0:0:8A2E:0370:7334 也是一个有效的 IPv6 address地址 (即，忽略 0 开头，忽略大小写)。  </p>
<p>然而，我们不能因为某个组的值为 0，而使用一个空的组，以至于出现 (::) 的情况。 比如， 2001:0db8:85a3::8A2E:0370:7334 是无效的 IPv6 地址。<br>同时，在 IPv6 地址中，多余的 0 也是不被允许的。比如， 02001:0db8:85a3:0000:0000:8a2e:0370:7334 是无效的。  </p>
<p>说明: 你可以认为给定的字符串里没有空格或者其他特殊字符。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 验证IP地址</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> IP string字符串 一个IP地址字符串</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> string字符串</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">solve</span>(<span class="params"> IP </span>) &#123;</span><br><span class="line">    <span class="comment">// write code here</span></span><br><span class="line">    <span class="comment">// 参考他人代码，并没有很特别的地方，所以这个就不分析了。感觉牛客上的题解比较正常，LeetCode上大神好多</span></span><br><span class="line">    <span class="keyword">let</span> res=<span class="string">&#x27;&#x27;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="variable constant_">IP</span>.<span class="title function_">includes</span>(<span class="string">&#x27;.&#x27;</span>) &amp;&amp; !<span class="variable constant_">IP</span>.<span class="title function_">includes</span>(<span class="string">&#x27;:&#x27;</span>))&#123;</span><br><span class="line">        <span class="comment">// .  ipv4的分割符</span></span><br><span class="line">        <span class="keyword">let</span> arr=<span class="variable constant_">IP</span>.<span class="title function_">split</span>(<span class="string">&#x27;.&#x27;</span>)</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> value <span class="keyword">of</span> arr)&#123;</span><br><span class="line">            <span class="keyword">if</span>(!(value)  || <span class="built_in">isNaN</span>(value) || (value!=<span class="number">0</span> &amp;&amp; value.<span class="title function_">indexOf</span>(<span class="number">0</span>)===<span class="number">0</span>) || (value&gt;<span class="number">255</span>) || (value&lt;<span class="number">0</span>))&#123;</span><br><span class="line">                res=<span class="string">&quot;Neither&quot;</span>;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> res||<span class="string">&#x27;IPv4&#x27;</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="variable constant_">IP</span>.<span class="title function_">includes</span>(<span class="string">&#x27;:&#x27;</span>) &amp;&amp; !<span class="variable constant_">IP</span>.<span class="title function_">includes</span>(<span class="string">&#x27;.&#x27;</span>))&#123;</span><br><span class="line">        <span class="comment">// :  ipv6的分割符</span></span><br><span class="line">        <span class="keyword">let</span> arr=<span class="variable constant_">IP</span>.<span class="title function_">split</span>(<span class="string">&#x27;:&#x27;</span>)</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> value <span class="keyword">of</span> arr)&#123;</span><br><span class="line">            <span class="keyword">let</span> vArr=value.<span class="title function_">split</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">            <span class="comment">// 空，或超出4位长度</span></span><br><span class="line">            <span class="keyword">if</span> ((!value) || (vArr.<span class="property">length</span>&gt;<span class="number">4</span>))&#123;</span><br><span class="line">                res=<span class="string">&#x27;Neither&#x27;</span></span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">// 不是16进制的数值</span></span><br><span class="line">            <span class="comment">// 存在非16进制就返回 Neither</span></span><br><span class="line">            vArr.<span class="title function_">some</span>(<span class="function">(<span class="params">el</span>)=&gt;</span>&#123;</span><br><span class="line">                el=el.<span class="title function_">toUpperCase</span>()</span><br><span class="line">                <span class="keyword">if</span>(<span class="built_in">isNaN</span>(el) &amp;&amp; (el&gt;<span class="string">&#x27;F&#x27;</span> || el&lt;<span class="string">&#x27;A&#x27;</span>) )&#123;</span><br><span class="line">                    res=<span class="string">&#x27;Neither&#x27;</span></span><br><span class="line">                    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> res||<span class="string">&#x27;IPv6&#x27;</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&quot;Neither&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    solve : solve</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h1 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h1><h2 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h2><p>vue的学习还是逃不过了解vue2.0啊！！！难受哦</p>
<p><strong>说说vue</strong></p>
<p>前端开发框架，核心特性是数据驱动型，即MVVM模型，M（model）就是业务逻辑块，负责交互；V（view）视图层，即页面，最终的效果；VM（viewmodel）视图模块层，用来连接M和V，数据更新后，最终如何从M更新到V就是这层在负责。和传统开发相比：vue基本不直接操作DOM；和react相比：不同在于react使用单向数据流；diff逻辑不同，react及时更新到虚拟DOM上，然后批量更新到DOM中，vue边对比边更新。</p>
<p><strong>vue生命周期</strong></p>
<p>v2和v3的简单对照</p>
<table>
<thead>
<tr>
<th>周期</th>
<th>描述</th>
<th>和v3区别（销毁过程改名）</th>
<th>v3中对应的钩子函数</th>
</tr>
</thead>
<tbody><tr>
<td>beforeCreate</td>
<td></td>
<td></td>
<td>使用组合式api，直接用<strong>setup</strong>代替</td>
</tr>
<tr>
<td>created</td>
<td>组件的数据和事件已经被初始化，可以被调用</td>
<td></td>
<td><strong>setup</strong></td>
</tr>
<tr>
<td>beforeMount</td>
<td>编译模板但是没有渲染</td>
<td></td>
<td>其余单词前+<strong>on</strong></td>
</tr>
<tr>
<td>mounted</td>
<td>DOM初始化完成，可以进行操作</td>
<td></td>
<td></td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>data数据已经是最新了</td>
<td></td>
<td></td>
</tr>
<tr>
<td>updated</td>
<td>页面和data都是最新的数据</td>
<td></td>
<td></td>
</tr>
<tr>
<td>beforeDestroy</td>
<td>data和method等等还可以访问</td>
<td>beforeUnmount</td>
<td></td>
</tr>
<tr>
<td>destroyed</td>
<td>组件销毁，内部数据不可用</td>
<td>unmounted</td>
<td></td>
</tr>
</tbody></table>
<p><strong>new vue()的过程</strong></p>
<p>拿源码一通分析，不是很理解，记得一个UP主说的，就做两件事儿：初始化和创建数据更新机制。</p>
<p>说说SPA</p>
<p>单页面程序，网页程序的模型，通过动态重写实现页面的变化。基于对url的监听API的实现，看看大佬写的代码。</p>
<p><strong>hash模式</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义 Router  </span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Router</span> &#123;  </span><br><span class="line">    <span class="title function_">constructor</span> () &#123;  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span> = &#123;&#125;; <span class="comment">// 存放路由path及callback  </span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">currentUrl</span> = <span class="string">&#x27;&#x27;</span>;  </span><br><span class="line">          </span><br><span class="line">        <span class="comment">// 监听路由change调用相对应的路由回调  </span></span><br><span class="line">        <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;load&#x27;</span>, <span class="variable language_">this</span>.<span class="property">refresh</span>, <span class="literal">false</span>);  </span><br><span class="line">        <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;hashchange&#x27;</span>, <span class="variable language_">this</span>.<span class="property">refresh</span>, <span class="literal">false</span>);  </span><br><span class="line">    &#125;  </span><br><span class="line">      </span><br><span class="line">    <span class="title function_">route</span>(<span class="params">path, callback</span>)&#123;  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span>[path] = callback;  </span><br><span class="line">    &#125;  </span><br><span class="line">      </span><br><span class="line">    <span class="title function_">push</span>(<span class="params">path</span>) &#123;  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span>[path] &amp;&amp; <span class="variable language_">this</span>.<span class="property">routes</span>[path]()  </span><br><span class="line">    &#125;  </span><br><span class="line">&#125;  </span><br><span class="line">  </span><br><span class="line"><span class="comment">// 使用 router  </span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">miniRouter</span> = <span class="keyword">new</span> <span class="title class_">Router</span>();  </span><br><span class="line">miniRouter.<span class="title function_">route</span>(<span class="string">&#x27;/&#x27;</span>, <span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page1&#x27;</span>))  </span><br><span class="line">miniRouter.<span class="title function_">route</span>(<span class="string">&#x27;/page2&#x27;</span>, <span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page2&#x27;</span>))  </span><br><span class="line">  </span><br><span class="line">miniRouter.<span class="title function_">push</span>(<span class="string">&#x27;/&#x27;</span>) <span class="comment">// page1  </span></span><br><span class="line">miniRouter.<span class="title function_">push</span>(<span class="string">&#x27;/page2&#x27;</span>) <span class="comment">// page2  </span></span><br></pre></td></tr></table></figure>

<p><strong>history模式</strong>，这个不大懂</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义 Router  </span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Router</span> &#123;  </span><br><span class="line">    <span class="title function_">constructor</span> () &#123;  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span> = &#123;&#125;;  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">listerPopState</span>()  </span><br><span class="line">    &#125;  </span><br><span class="line">      </span><br><span class="line">    <span class="title function_">init</span>(<span class="params">path</span>) &#123;  </span><br><span class="line">        history.<span class="title function_">replaceState</span>(&#123;<span class="attr">path</span>: path&#125;, <span class="literal">null</span>, path);  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span>[path] &amp;&amp; <span class="variable language_">this</span>.<span class="property">routes</span>[path]();  </span><br><span class="line">    &#125;  </span><br><span class="line">      </span><br><span class="line">    <span class="title function_">route</span>(<span class="params">path, callback</span>)&#123;  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span>[path] = callback;  </span><br><span class="line">    &#125;  </span><br><span class="line">      </span><br><span class="line">    <span class="title function_">push</span>(<span class="params">path</span>) &#123;  </span><br><span class="line">        history.<span class="title function_">pushState</span>(&#123;<span class="attr">path</span>: path&#125;, <span class="literal">null</span>, path);  </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">routes</span>[path] &amp;&amp; <span class="variable language_">this</span>.<span class="property">routes</span>[path]();  </span><br><span class="line">    &#125;  </span><br><span class="line">      </span><br><span class="line">    listerPopState () &#123;  </span><br><span class="line">        <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;popstate&#x27;</span> , <span class="function"><span class="params">e</span> =&gt;</span> &#123;  </span><br><span class="line">            <span class="keyword">const</span> path = e.<span class="property">state</span> &amp;&amp; e.<span class="property">state</span>.<span class="property">path</span>;  </span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">routers</span>[path] &amp;&amp; <span class="variable language_">this</span>.<span class="property">routers</span>[path]()  </span><br><span class="line">        &#125;)  </span><br><span class="line">    &#125;  </span><br><span class="line">&#125;  </span><br><span class="line">  </span><br><span class="line"><span class="comment">// 使用 Router  </span></span><br><span class="line">  </span><br><span class="line"><span class="variable language_">window</span>.<span class="property">miniRouter</span> = <span class="keyword">new</span> <span class="title class_">Router</span>();  </span><br><span class="line">miniRouter.<span class="title function_">route</span>(<span class="string">&#x27;/&#x27;</span>, <span class="function">()=&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page1&#x27;</span>))  </span><br><span class="line">miniRouter.<span class="title function_">route</span>(<span class="string">&#x27;/page2&#x27;</span>, <span class="function">()=&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page2&#x27;</span>))  </span><br><span class="line">  </span><br><span class="line"><span class="comment">// 跳转  </span></span><br><span class="line">miniRouter.<span class="title function_">push</span>(<span class="string">&#x27;/page2&#x27;</span>)  <span class="comment">// page2  </span></span><br></pre></td></tr></table></figure>

<p>v-if和v-for的使用注意点</p>
<p>用在同一组件上，<code>v-for</code>会优先于<code>v-if</code>做解析，本身<code>v-if</code>就消耗资源，如果循环次数非常多，那肯定是不行的。解决方案：</p>
<ol>
<li>控制一个列表的显示可以将<code>v-if</code>写在<code>template</code>上</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;template v-<span class="keyword">if</span>=<span class="string">&quot;isShow&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;item in items&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>利用计算属性或其他方案，将不需要显示的项过滤掉，看代码</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">    <span class="attr">items</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> item.<span class="property">isShow</span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2023/03/22/002%E6%8A%95%E7%AE%80%E5%8E%86%E5%92%8C%E5%88%B7%E9%A2%98/" data-id="clfjqowu60001ewaa1pc968w3" data-title="002投简历和刷题" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2023/03/22/003%E5%88%B7%E9%A2%98/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          003刷题
        
      </div>
    </a>
  
  
    <a href="/2023/03/22/001%E5%AE%9E%E6%96%BD%E5%A4%8D%E4%B9%A0/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">001实施复习</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%99%BE%E6%97%A5%E5%8D%9A%E5%AE%A2%E8%AE%A1%E5%88%92/">百日博客计划</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/" rel="tag">ES6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/uniapp/" rel="tag">uniapp</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/ES6/" style="font-size: 10px;">ES6</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/uniapp/" style="font-size: 10px;">uniapp</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/03/">March 2023</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2023/03/24/025uniapp-done/">025uniapp-done</a>
          </li>
        
          <li>
            <a href="/2023/03/23/024uniapp%E7%AC%AC%E4%B8%89%E5%A4%A9/">024uniapp第三天</a>
          </li>
        
          <li>
            <a href="/2023/03/22/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">023gitee+hexo搭建个人博客</a>
          </li>
        
          <li>
            <a href="/2023/03/22/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8MDN%E6%96%87%E6%A1%A3/">(no title)</a>
          </li>
        
          <li>
            <a href="/2023/03/22/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/js/jquery-3.4.1.min.js"></script>



  
<script src="/fancybox/jquery.fancybox.min.js"></script>




<script src="/js/script.js"></script>





  </div>
</body>
</html>